<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author ： NWJ
        Version ： 1.0 -->


<template>
  <div class="container">
    <!-- 搜索框和搜索按钮 -->
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入搜索关键词"
        @keyup.enter="handleSearch"
      />
      <el-button
        type="primary"
        @click="handleSearch"
        :disabled="!searchKeyword"
      >
        搜索
      </el-button>
    </div>

    <!-- 数据展示 -->
    <div v-if="data.length > 0" class="table-container">
      <el-table :data="data" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="快件名称" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="date" label="日期" />
      </el-table>
    </div>
    <div v-else class="no-data">
      <el-empty description="没有数据" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 传入的 props，决定展示哪种数据
    type: {
      type: String,
      required: true,
      validator: (value) => ['1', '2', '3', '4'].includes(value) // 限制传入的值只能是 1, 2, 3, 4
    }
  },
  data()
  {
    return {
      searchKeyword: '', // 搜索关键词
      data: [] // 表格数据
    }
  },
  watch: {
    // 监听 type 的变化，重新加载数据
    type: {
      immediate: true,
      handler()
      {
        this.loadData()
      }
    }
  },
  methods: {
    // 加载数据
    loadData()
    {
      // 模拟数据加载
      switch (this.type)
      {
      case '1':
        console.log('this.type: ')
        console.log(this.type)
        this.data = [
          { name: '快件A', status: '已取', date: '2023-10-01' },
          { name: '快件B', status: '已取', date: '2023-10-02' }
        ]
        break
      case '2':
        this.data = [
          { name: '快件C', status: '待取', date: '2023-09-15' },
          { name: '快件D', status: '待取', date: '2023-09-20' }
        ]
        break
      case '3':
        this.data = [
          { name: '快件E', status: '待取', date: '2023-10-05' },
          { name: '快件F', status: '待取', date: '2023-10-06' }
        ]
        break
      case '4':
        this.data = [
          { name: '快件G', status: '已取', date: '2023-10-07' },
          { name: '快件H', status: '已取', date: '2023-10-08' }
        ]
        break
      default:
        this.data = []
      }
    },
    // 搜索操作
    handleSearch()
    {
      if (this.searchKeyword)
      {
        // 模拟搜索逻辑
        this.$message.success(`搜索关键词：${this.searchKeyword}`)
        // 这里可以调用接口或其他逻辑
      }
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.table-container {
  margin-top: 20px;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style>
